<template>
		<view class="goods-box x-start" @tap="click">
			<view class="goods__tag" v-if="type"><image class="tag-img" :src="tagMap[type]" mode=""></image></view>
			<image class="goods-img" :src="image" mode="aspectFill"></image>
			<view class="y-start">
				<view class="goods-title more-t">{{ title }}</view>
					<view v-if="subtitle" class="describe-text">{{ subtitle }}</view>
				<slot name="describe">
					<view class="mb20">
						<view v-if="describe" class="describe-text">规格：{{ describe }};</view>
						<view v-if="number" class="describe-text">数量：x{{ number }}</view>
					</view>
					
				</slot>
				<slot name="cardBottom">
					<view class="price">{{ price }}</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 商品小卡片
 * @property {String} title - 标题
 * @property {String} subtitle - 副标题
 * @property {String} image - 图片地址
 * @property {String} describe - 描述信息
 * @property {String | Number} price - 价格
 * @property {String} type - 商品类型
 *  @property {Number} number - 商品数量
 * @event {Function} click - 点击卡片
 */
export default {
	components: {},
	data() {
		return {
			tagMap: {
				seckill: this.$IMG_URL + 'ill_tag.png'
			}
		};
	},
	props: {
		image: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: ''
		},
		subtitle: {
			type: String,
			default: ''
		},
		describe: {
			type: String,
			default: ''
		},
		price: {
			type: [Number, String],
			default: ''
		},
		type: {
			type: String,
			default: ''
		},
		number: {
			type: Number,
			default: 0
		}
	},
	computed: {},
	created() {},
	methods: {
		click() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss">
.goods-box {
	position: relative;
	.goods-img {
		height: 180rpx;
		width: 180rpx;
		background-color: #ccc;
		margin-right: 25rpx;
	}
	.goods__tag {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		.tag-img {
			width: 60rpx;
			height: 30rpx;
		}
	}
	.goods-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		width: 450rpx;
		line-height: 40rpx;
		margin-bottom: 6rpx;
	}

	.describe-text {
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);
	}

	.price {
		color: $t-mainColor;
		font-weight: 600;
		&::before {
			content: '￥';
			font-size: 24rpx;
		}
	}
}
</style>
